<template>
  <div class="login flexC">
    <div class="flex9"></div>
    <form action="" >
      <p class="title">浦东新区长护险<br/>协同监管大数据平台</p>
      <input type="text" v-model="userName" placeholder="请输入用户名" class="input_box input_top" autofocus>
      <input type="password" v-model="pwd" placeholder="请输入密码" class="input_box input_pwd">
      <div class="input_box input_bottom phone_box flex" style="position:relative;">
        <input type="text" v-model="verifyCode" placeholder="请输入验证码" class="input_box flex3" style="width: 70%;margin: 0 0">
        <div style="position: absolute;top: 0.25rem;left: 60%; ">
          <img :src="'data:image/gif;base64,'+ this.srcUrl" style="width: 80%" class="cursor" title="" @click="refreshCode">
        </div>
      </div>
      <p @click="isClick" class="login_btn cursor">登录</p>
    </form>
    <div class="flex1"></div>
    <p class="bottom_title">万达信息股份有限公司 技术支持</p>
    <div class="errorMessages PositionA Font_s30 FontWeightB TextC" :class="{showErrorMessage: isShow}">
      <p>{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      // 用户输入的用户名
      userName: '',
      // 用户输入的密码
      pwd: '',
      // 验证码
      verifyCode: '',
      // 通过接口请求到的验证码照片
      srcUrl: '',
      // 判断错误信息是否显示
      isShow: true,
      errorMessage: ''
    }
  },
  created () {
    this.enterKeyCode()
  },
  mounted () {
    this.getYzmImg()
  },
  methods: {
    // 请求接口
    postData () {
      this.$http.post(this.$api.Login.login, 'loginname=' + this.userName + '&passwd=' + this.pwd + '&yzm=' + this.verifyCode, true).then(result => {
        this.loginInfo = result.data
        // 对请求的结果进行判断
        if (this.loginInfo.status === '1') {
          sessionStorage.loginName = 'true'
          // 跳转到首页
          this.$goRoute('/Home')
        } else {
          this.errorMessage = this.loginInfo.message
          this.isShow = false
        }
      })
    },
    // 请求验证码
    getYzmImg () {
      this.$http.get(this.$api.GetYZM.getYZM, true).then(result => {
        this.srcUrl = result.data
      })
    },
    // 重新获取验证码
    refreshCode () {
      this.srcUrl = ''
      this.getYzmImg()
    },
    // 登录按钮的响应事件
    isClick () {
      this.isShow = true
      if (this.userName.length === 0 || this.pwd.length === 0 || this.verifyCode.length === 0) {
        this.errorMessage = '请输入用户信息登录及验证码登录...'
        this.isShow = false
        this.getYzmImg()
        setTimeout(() => {
          this.isShow = true
        }, 3 * 1000)
      } else {
        this.postData()
      }
    },
    // Enter按键的响应事件
    enterKeyCode () {
      var _self = this
      document.onkeydown = function (e) {
        // 获取键盘点击的按键并进行判断是否为enter
        var key = window.event.keyCode
        if (key === 13) {
          _self.isClick()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    background: url(../assets/img/home/login_bg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    .title{
      text-align: center;
      font-weight:bold;
      color:rgba(255,255,255,1);
      line-height:3rem;
      font-size: 2rem;
    }
    .right_btn {
      color: rgba(47,156,230,1);
      border: none;
      height: 3.8rem;
      font-size: 1.2rem;
      border-radius:0 10px 0 0;
      background:rgba(255,255,255,1);
    }
    .invalid-feedback {
      color: red;
      padding: 0.5rem;
    }
    .input_box {
      width:35%;
      height:3.8rem;
      position: relative;
      overflow: hidden;
      display: block;
      margin: 0 auto;
      border: none;
      background:rgba(255,255,255,1);
      opacity:0.8;
      color: #333333;
      font-size: 1.4rem;
      text-indent: 1rem;
    }
    .input_pwd {
      margin-top: 0.3rem;
      margin-bottom: 0.3rem
    }
    input::-webkit-input-placeholder{
      color: #CCCCCC;
      font-size: 1.4rem;
    }
    .input_top {
      border-radius:10px 10px 0 0 ;
      margin-top: 3rem;
    }
    .input_bottom {
      border-radius:0 0 10px 10px;
    }
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
    .login_btn{
      width:36%;
      height:3.8rem;
      background:rgba(47,156,230,1);
      border-radius:10px;
      color: white;
      font-size: 1.5rem;
      display: block;
      line-height:3.5rem ;
      text-align: center;
      margin: 0 auto;
      margin-top: 3rem;
      text-decoration:none;
    }
    .bottom_title{
      font-size:0.8rem;
      color:rgba(153,153,153,1);
      line-height:24px;
      opacity:0.4;
      padding-bottom: 3rem;
    }
    .errorMessages {
      bottom: 27%;
      left: 40%;
      width: 20%;
      color: #ff0000;
    }
    .showErrorMessage {
      display: none
    }
  }
</style>
